<template>
    <div class='card-member' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix'>
                <div class='lf personInfo'>
                    <h4 class="brief" v-if="!keyEmployee" :title="personInfo.dept_descr">{{personInfo.dept_descr}}</h4>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.position_desc"><strong>职位:</strong>&nbsp;{{personInfo.position_desc | handlePosition}}</li> 
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate && personInfo.birthdate.split(' ')[0]}}({{personInfo.birthdate | calculateAge}}岁)</li> 
                        <li class="ellipsis" :title="personInfo.highest_edu"><i class="fa fa-graduation-cap" ></i>最高学历 : {{personInfo.highest_edu ? personInfo.highest_edu : '&nbsp;'}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                        <li class="ellipsis" v-if="keyEmployee" :title="personInfo.sta_lvl_descr"><i class="iconfont" ></i>职级:{{personInfo.sta_lvl_descr | handlePosition}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" target="_blank" :href="ComputedEmplid">
                    <i class="fa fa-file-pdf-o"></i> 履历表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>
        </div>
        <el-dialog :title="title" size="small" :visible.sync="dialogTableVisible" :lock-scroll=false>
            <div>
                <h3>薪酬组成</h3>
                <el-table :data="gridData">
                    <el-table-column property="descr" label="薪酬项" width="150"></el-table-column>
                    <el-table-column property="comprate" label="金额" width="200"></el-table-column>
                    <el-table-column property="currency_CD" label="货币"></el-table-column>
                    <el-table-column property="frequency_DESCR" label="发薪频率"></el-table-column>
                </el-table>
            </div>
            <div class="salaryRecord">
                <h3>近半年发薪记录</h3>
                <el-table :data="gridData1" :fit='true'>
                    <el-table-column property="cal_PRD_ID" label="发薪期间" width="80"></el-table-column>
                    <el-table-column property="cal_ID" label="发薪类型" width="80"></el-table-column>
                    <el-table-column property="c_GROSS_AMT" label="收入合计	" width="80"></el-table-column>
                    <el-table-column property="c_DDCT_AMT" label="扣减合计" width="80"></el-table-column>
                    <el-table-column property="c_NET_PAY" label="实发工资"></el-table-column>
                    <el-table-column property="c_MPF" label="公司承担社保/MPF"></el-table-column>
                    <el-table-column property="c_LABORCOST" label="人工成本合计"></el-table-column>
                    <el-table-column property="currency_CD" label="货币代码"></el-table-column> 
                </el-table>
            </div>

        </el-dialog>
    </div>
</template>
<script>
    import Vue from 'vue'
    import {Table,TableColumn,Dialog} from 'element-ui'
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Dialog)
    export default {
        data(){
            return{
                // wid:'33.333%'
                url:'#/resume',
                dialogTableVisible:false,
                gridData: [{
                    // name:'',
                    // value:'',
                    // address:'CNY',
                    // address1:'每月'
                    // },{
                    // name:'',
                    // value:'',
                    // address:'CNY',
                    // address1:'每月'
                    // },{
                    // name:'',
                    // value:'',
                    // address:'CNY',
                    // address1:'每月'
                    // },{
                    // name:'',
                    // value:'',
                    // address:'CNY',
                    // address1:'每月'
                    // },{
                    // name:'',
                    // value:'',
                    // address:'CNY',
                    // address1:'每月'
                    },],
                gridData1:[],
                srcImg:null,
            }
        },
        components:{

        },
    	created:function(){
        	this.Axios.Post(this.URL.getEmployeeImg.url,{
                    emplid:this.personInfo.emplid
                }).then(res=>{
                	this.srcImg = 'data:image/png;base64,'+ res.data.message;
                })
        },
        methods:{
            salaryDetail:function(){
                let self= this;
                let para = {
                    emplId:this.personInfo.emplid//获取当前点击名片的id
                };
            this.Axios.Post(this.URL.getSalaryByEmplid.url,para)
                .then(function(res){
                    self.gridData1= res.data.datas;
                       
                        self.payArray=[];//近半年发薪记录
                        for(let i=0;i<res.data.datas.salarys.length;i++){
                            let str_id = res.data.datas.salarys[i].summary.cal_ID;
                            res.data.datas.salarys[i].summary.cal_ID = str_id.indexOf("PAY") >-1 ? ("正常发薪") : ("多次发薪");
                            self.payArray.push(res.data.datas.salarys[i].summary);
                            console.log(123,str_id);
                        }
                        self.gridData1= self.payArray;
                        self.gridData= res.data.datas.salaryComprise;//获取薪酬组成
                        console.log(123,gridData1);
                })
                this.dialogTableVisible = true;
            }
        },
        computed:{
            title:function(){
                
                return  this.personInfo.name+"-薪酬信息" 
            },
			ComputedEmplid : function(){
                return 'module/resume.html?emplid=' + this.personInfo.emplid 
			},
//          srcImg : function(){
//              var ImgObj = new Image(); //判断图片是否存在  
//              ImgObj.src = "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
//              //没有图片，则返回-1  
//              if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
//                  return "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
//              } else {  
//                  return '/static/images/default1.jpg';
//              }  
//              
//          },
            keyEmployee:function(){
                return this.type === "key" ? true :false;
            }
		},
        props:{
            width:{
                type:String,
                default:'33.333%'
            },
            personInfo:{
                type:Object,
                default:''
            },
            type:{
                type:String,
                default:'dept'
            }
        },
        filters:{
            calculateAge:function(value){

                if (value) {value = value.split(" ")[0]} else {return "";};
           
                return new Date().getFullYear() - new Date(value).getFullYear();
            },
            handlePosition:function(value){
                if (!value || !value.trim()) {
                    return "";
                }
                if (value && value.indexOf("_") < 0) {
                    return value
                }
                return value.split("_")[1];
            }

        },
        watch:{
            widt:function(){
                // console.log('watch',this.widt);
                // console.log(this.red,'tell me color');
            }
        }
    }
</script>
<style scoped>
    .card-member{
       
        min-height: 1px;
        float: left;
        color: #333;
        background-color: #fff;
        padding-right: 10px;
        padding-left: 10px;
    }
    .card-inner{
        width:100%;
        position: relative;
        margin: 10px auto;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }

/*个人信息区域样式 start*/
    .card-member .personTotal{
        cursor: pointer;
        margin-bottom: 20px;

    }
    .card-member .personInfo{
        float: left;
        width:69%;
        padding-left:4%;
    }
    .iconfont{
        width:20px;
        display: inline-block;
    }
    .card-member .name{
        font-size: 24px;
        margin-bottom: 10px;
        margin-top:15px;
        font-weight: 500;
        line-height: 1.1;
    }
    .card-member .brief{
        margin-top:10px;
        font-size:18px;
        font-weight: 300;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .card-member .width-nochange{
        /*max-width: 237px;*/
        min-width: 223px;
        font-size:14px;
    }
    
    .card-member li{
        line-height: 25px;
        color: #333;
    }
    .card-member li .fa{
        width:20px;
    }
    .card-member .personImg{
        float: left;
        width:31%;
        padding-left:5px;
        padding-top: 25px;
    }
    .card-member .cardPhoto{
        /*margin-left:5px;*/
        width: 100px;
        height: 139px;
        border-radius: 50%;
        max-width: 100%;
        vertical-align: middle;
    }
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
    .card-member .btnArea{
        background: #F2F5F7;
        padding: 12px 0;
        border-top: 1px solid #E6E9ED;
        text-align: center;
        font-size: 12px;
        height:44px;
    }
    .card-member .btn {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
    }
    .card-member .btnArea .btn-leaderInfo{
        color: #fff; 
        background-color: #3c8dbc;
        border-color: #204d74;
    }
    .card-member .btnArea .btn-leaderInfo:hover{
        background-color: #367fa9;
        /*background-color: #00c0ef;*/
        cursor: pointer;
    }
    .card-member .btnArea .btn-leaderSalary{
        color: #fff; 
        margin-left:8px;
        background-color: #00c0ef;
        border-color: #00acd6;
    }
    .card-member .btnArea .btn-leaderSalary:hover{
        background-color: #00acd6;
        cursor: pointer;
    }
/*按钮区域样式 end*/
</style>

<style>
   .card-member .el-dialog--small {
        width: 63%;
        
    }
    .card-member .el-dialog {
        position:relative;
        left:0;
        transform:translateX(30%);
        -ms-transform:translateX(30%);
    }
    .card-member .el-dialog__header{
        width:98%;
    }
    .card-member .el-table .gutter {
        display: none;
    }
    .card-member .salaryRecord{
        margin-top:20px;
    }
    .card-member .el-dialog__body{
        cursor:pointer;
    }

</style>




